
/*
* 组件：产品列表Item
* 数据：接收props
* @params: {
    data: 数据
    target: 页面跳转
}
*/
import React from 'react';
import Link from 'next/link';
import { EnvironmentFilled } from '@ant-design/icons';
import { replaceImageUrl, formatActivityClass } from '@/utils';
// css
import styles from '@/styles/CommonList.module.scss';

const ListItem = ({ target, targetUrl, data }) => {

    const { goodsName, title, description, subtitle, publishTime } = data;
    const isGuide = target === '/guide',
          isHotel = target === '/hotel';

    return (
        <div className={[styles['item'], formatActivityClass(data.algorithms)].join(' ')}>
            <Link href={targetUrl}>
                <a className={styles['img-wrap']} target="_blank">
                    <img src={replaceImageUrl(data.thumbnail || data.coverUrl)} alt="" />
                </a>
            </Link>
            {
                // 酒店住宿才有定位标签
                isHotel && data.address
                ? <p className={styles['location']}>
                    <EnvironmentFilled /> {data.address}
                  </p>
                : ""
            }
            <div className={styles['item-info']}>
                <h3 className={styles['title']}>
                    <Link href={targetUrl}>
                        <a target="_blank">{goodsName || title}</a>
                    </Link>
                </h3>
                {
                    isGuide
                    ? <p className={styles['time']}>发表于 {publishTime.replace(/\//g, '-')}</p>
                    : ""
                }
                <p className={styles['des']} title={`${(goodsName || title)} - ${description || subtitle}`}>{description || subtitle}</p>
                {
                    // 旅游攻略不要标签
                    !isGuide
                    ? <div className={styles['label']}>
                        {
                            data.labels ? 
                            data.labels.map(item => {
                                return <span key={item}>{item}</span>
                            }) : ''
                        }
                      </div>
                    : ""
                }
                <p className={styles['price']}>
                    {
                        // 旅游攻略不要价格
                        !isGuide
                        ? <>￥<em>{data.showPrice || data.price || 0}</em><span>起</span></>
                        : ""
                    }
                    <Link href={targetUrl}><a target="_blank">查看详情</a></Link>
                </p>
            </div>
        </div>
    )
}

export default React.memo(ListItem)